<template>
  <div class="container" :style="{height}">
      <div class="item-container" v-for="(item,index) in items" :key="index">
          <div class="item-rankid">
            <div>{{index + 1}}</div>
          </div>
          <div class="item-class">{{item[fields[0]]}}</div>
          <div class="item-content">{{item[fields[1]]}}</div>
      </div>
  </div>
</template>

<script>
export default {
  props:{
    height: {
      default:'330px',
      type:String
    },
    items: Array,
    fields: Array
  }
}
</script>

<style scope>
.container{
  overflow-y: auto;
}
.item-container{
    display: flex;
    color: #606266;
    font-size: 15px;
    margin: 10px 0
}
.item-rankid{
  width: 50px;
}
.item-class{
  flex: 2
}
.item-content{
  flex: 1
}
</style>